<template>
  <div class="head">
    <img src="../ui/img/2.jpg" width="50" height="50" />
    <h1>红娘后台管理</h1>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.head {
  height: 55px;
  background: linear-gradient(45deg, #f4b4d7, #f7d2ff); /* 设置类似粉色的渐变色 */
  overflow: hidden;
  display: flex;
  align-items: center;
  img {
    display: inline-block;
    /* 垂直居中对齐 */
    vertical-align: middle;
    margin-left: 40px;
  }
  h1 {
    display: inline-block;
    font-size: larger;
    color: rgb(0, 0, 0);
    margin-left: 10px;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 40px; /* 设置行高使得文本垂直居中对齐 */
  }
}
</style>
